<template>
	<view class="container-main">
		<uv-skeletons :loading="skeletonShow" :skeleton="skeletonStyle">
			<view class="container">
				<tui-navigation-bar @init="initNavigation" backgroundColor="#fff" color="#333">
					<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
						<!-- 状态栏 -->
						<view class="status-bar"> </view>
						<!-- logo & 搜索 -->
						<view class="top-bar">
							<view class="logo"></view>
							<!-- 定位 -->
							<view class="location-wrapper" @tap.stop.prevent="getLocation()">
								{{CityName}}
							</view>
						</view>
					</view>
				</tui-navigation-bar>

				<layout @scrolltolower="scrolltolower" @scroll="scroll" @refresherrefresh="refresherrefresh"
					:refresher="scrollTop < 10" :headerStyle="headerStyle">
					<view>
						<!-- main -->
						<view class="main">
							<!-- banner -->
							<banner class="" :dataList="bannerList"></banner>
							<view class="content-main">
								<!-- 陪玩类目tab -->
								<tabs v-if="CategoryList.list.length > 1" @click="onCategory" keyName="categoryName"
									:list="CategoryList.list" itemStyle="auto">
								</tabs>
								<!-- 暂未开发提示 -->
								<view v-if="!(cityList.includes(city))" class="city-reminder">当前城市正在开通中，将为您展示就近城市</view>
								<!-- city -->
								<!-- 陪玩列表 -->
								<view class="accompany">
									<view class="accompany-loading">
										<uv-loading-icon :show="!accompanyList.loading" :size="28"
											timing-function="linear" mode="circle"></uv-loading-icon>
									</view>
									<template v-if="accompanyList.list.length > 0">
										<navigator class="accompany-list" v-for="(item,index) in accompanyList.list"
											:key="item.userId"
											:url="'/page_sharing/accompany/details?id=' + item.userId"
											hover-class="none">
											<text
												v-show="false">{{'/page_sharing/accompany/details?id=' + item.userId}}</text>
											<view class="accompany-item">
												<view class="accompany-profile">
													<!-- <image class="avatarUrl" :src="item.avatar" mode="aspectFill"></image> -->
													<uv-image mode="aspectFill" class="avatarUrl" :src="item.avatar"
														:lazyLoad="true" :observeLazyLoad="true" width="100%"
														height="100%" radius="50%" full shape="circle"></uv-image>
												</view>
												<view class="accompany-info">
													<view class="accompany-basic dis-flex">
														<view class="user-name onelist-hidden">{{item.nickName}}</view>
														<view class="location-wrapper">{{item.distance | distance}}
														</view>
													</view>
													<view class="label">
														<template v-for="(sin,li) in item.pengCategoryList">
															<view class="label-item"
																:class="{'label-item-major':sin.authState == 1}"
																:key="sin.categoryId" v-if="li < 2">
																{{sin.categoryName}}
															</view>
														</template>
														<!-- <view class="sl" v-if="item.pengCategoryList.length > 2">...</view> -->
													</view>
													<view class="information">
														<view class="price">
															<text class="price-num">￥<text
																	class="num">{{item.pengActualPrice}}</text>/{{item.serviceType == 1 ? '次':'小时'}}</text>
															<text class="serve-num"
																v-if="item.orderCount!=0">已服务{{item.orderCount}}单</text>
														</view>
														<image class="place-order"
															src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/peng.png">
														</image>
													</view>
												</view>
											</view>
											<view class="accompany-bottom" v-if="item.pengUserDescribe">
												<view class="dynamic" v-if="item.pengUserDescribe.describeType == 1">
													<view class="dy-iconfont icon-suolvetu"
														style="color: #BBBCBB; font-size: 16px;"></view>
													<view class="content onelist-hidden">
														更新了动态：{{item.pengUserDescribe.describeStr}}</view>
												</view>
												<view class="dynamic" v-else>
													<uv-avatar-group :maxCount="3"
														:urls="[item.pengUserDescribe.avatar]" size="16"
														gap="0.4"></uv-avatar-group>
													<view class="content onelist-hidden">
														等人评价：{{item.pengUserDescribe.describeStr}}</view>
												</view>
											</view>
										</navigator>
									</template>
									<empty v-show="accompanyList.loading && accompanyList.list.length <= 0"></empty>
								</view>
								<view v-show="load.loading">
									<uv-load-more :status="load.status" :loading-text="load.loadingText"
										:nomore-text="load.nomoreText" :line="load.status == 'nomore'" />
								</view>
							</view>
						</view>
					</view>
				</layout>
			</view>
		</uv-skeletons>
		<!-- #ifdef MP -->
		<addition-MP></addition-MP>
		<!-- #endif -->
		<survey-pop></survey-pop>
		<tabbar :current="tabbarCurrent" backdropFilter :tabBar="tabBar"></tabbar>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import skeleton from "@/utils/skeletonStyle.js";
	import banner from '@/components/banner/banner.vue';
	import tabs from '@/uni_modules/uv-tabs/components/uv-tabs/uv-tabs-index.vue';
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import layout from '@/components/jp-layout/layout.vue';

	const app = getApp();

	export default {
		mixins: [mp],
		components: {
			banner,
			tabs,
			tabbar,
			layout
		},
		data() {
			return {
				tabbarCurrent: 0, //当前索引
				tabBar: app.globalData.tabBar,
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5,
				navBarTop: 0,
				CityName: '正在定位',
				area: '余杭区',
				city:'杭州市',
				userLatitude: '',
				userLongitude: '',
				skeletonShow: true,
				load: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				// 轮播
				bannerList: [],
				CategoryList: {
					list: [{
						id: 0,
						categoryName: '全部',
						categoryIcon: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/temporary/all.png'
					}],
					current: 0,
					id: 0
				},
				accompanyList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				},
				getLocatStatus: false,
				skeletonStyle: skeleton.index,
				tempHeight: 0,
				headerStyle: {
					backgroundImage: 'url(https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/basic-bg.png)',
					backgroundRepeat: 'no-repeat',
					backgroundSize: '100% 640rpx'
				},
				cityList: []
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onReady() {},
		onLoad(options) {
			//加载页面数据
			this.getPageData();
		},
		onShow: function() {
			uni.hideTabBar()
			app.globalData.tabBar[0].name = 'home'
		},
		onHide() {
			uni.$off('add')
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {
			if (this.getLocatStatus) {
				this.accompanyList.page = 1
				this.requestPengList()
			}
		},
		/**
		 * 触底
		 */
		onReachBottom() {
			if (this.accompanyList.hasMore && this.accompanyList.loading) {
				this.load.loading = true
				this.requestPengList()
			}
		},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		filters: {
			distance(value) {
				let new_value = Math.floor(value * 100) / 100;
				let new_distance = new_value * 1000
				if (value > 1) {
					return new_value + "km"
				} else if (value < 1 && new_distance > 100) {
					return new_distance + "m"
				} else {
					return '<100m'
				}
			}
		},

		methods: {
			scroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrolltolower() {
				if (this.accompanyList.hasMore && this.accompanyList.loading) {
					this.load.loading = true
					this.requestPengList()
				}
			},
			refresherrefresh(fun = function() {}) {
				if (this.getLocatStatus) {
					this.accompanyList.page = 1
					Promise.all([this.requestPengList(), this.requestPageBanner(), this.getCityList()]).then(() => {
						fun()
					});
				}
			},
			//初始化导航栏
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},

			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.requestPageBanner(), this.getLocat(), this.getCityList()]).then(() => {
					this.skeletonShow = false;
					uni.stopPullDownRefresh();
					// this.$refs.popup.open();
				});
			},
			//获取城市列表
			getCityList() {
				return new Promise((resolve, reject) => {
					app._get(
						"/client/index/address/change", null,
						(result) => {
							let data = result.data
							data.forEach((item) => {
								item.childList.forEach((li) => {
									this.cityList.push(li.name)
								})
							})
						}, null, () => {
							resolve();
						}
					);
				});
			},
			// banner && 类目
			requestPageBanner() {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/index/banner", null,
						(result) => {
							let data = result.data
							data.indexCategoryList.forEach((item, index) => {
								this.$set(this.CategoryList.list, index + 1, item)
							})
							data.indexBannerList.forEach((item, index) => {
								this.$set(this.bannerList, index, item)
								this.$set(this.bannerList[index], 'id', index + 1)
							})
							this.bannerList = this.bannerList.sort((a, b) => {
								return a.sortValue - b.sortValue
							})
						}, null, () => {
							resolve();
						}
					);
				});
			},
			onCategory(item) {
				if (this.CategoryList.id != item.id) {
					this.CategoryList.id = item.id
					if (this.getLocatStatus) {
						this.accompanyList.page = 1
						this.requestPengList()
					}
				}
			},
			// 首页碰头人列表查询
			requestPengList() {
				return new Promise((resolve, reject) => {
					this.accompanyList.loading = false
					app._post_form(
						"/client/index/peng-user/page", {
							current: this.accompanyList.page,
							extra: {},
							model: {
								categoryId: this.CategoryList.id,
								countyName: this.area,
								cityName: this.city,
								userLatitude: this.userLatitude,
								userLongitude: this.userLongitude,
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = this.accompanyList;
							if (1 == page) {
								list.length = 0;
							}
							list = [...list, ...records];
							hasMore = total > list.length;
							if (hasMore) {
								page++;
								this.load.loading = false
							} else {
								this.load.status = 'nomore'
								this.load.loading = list.length > 4
							}
							this.accompanyList.page = page;
							this.accompanyList.list = list;
							this.accompanyList.hasMore = hasMore;
						}, null, () => {
							resolve();
							uni.stopPullDownRefresh();
							this.accompanyList.loading = true
						}
					);
				});
			},

			getLocation() {
				uni.navigateTo({
					url: '/pages/index/location'
				})
			},

			// 获取地理位置
			async getLocat() {
				let _that = this;
				uni.$on('selectArea', function(data) {
					_that.CityName = data.city + data.area
					_that.city = data.city
					_that.area = data.area
					_that.accompanyList.list = [];
					_that.accompanyList.page = 1
					_that.requestPengList()
					return
				})
				const location = await app.getLocationInfoGd();
				console.log(location);
				_that.getLocatStatus = !!location.status
				if (location.status == 'fail') {
					_that.CityName = location.value
					_that.city = '杭州市'
					_that.area = '余杭区'
					uni.setStorage({
						key: 'City_Name',
						data: '正在定位',
					});
				} else {
					// #ifdef MP
					_that.city = location.city
					_that.area = location.area ? location.area : location.street;
					_that.userLatitude = location.latitude;
					_that.userLongitude = location.longitude
					// #endif

					// 获取地理位置
					this.getCityName()
				}
				this.requestPengList()
			},
			//获得城市缓存
			getCityName() {
				let _that = this;
				uni.getStorage({
					key: 'City_Name',
					success(res) {
						_that.CityName = res.data
					}
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	$mainSectionHeight: 696rpx; //首页section高度
	$tab-bar-height: 49px; //tabbar高度

	.top-bar {
		display: flex;
		align-items: center;
		padding: 0 20rpx;

		.logo {
			font-size: 32rpx;
			width: 180rpx;
			height: 64rpx;
			background: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/new_logo.png") no-repeat;
			background-size: auto 100%;
		}
	}

	.location-wrapper {
		flex-grow: 1;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		// font-weight: 500;
		color: #232323;
		line-height: 37rpx;

		&::before {
			font-family: "dy-iconfont";
			content: "\e66e";
			font-size: 28rpx;
			padding-right: 10rpx;
			box-sizing: border-box;
		}
	}

	.container-main {
		background: #F6F8F7;
		min-height: calc(100vh - 130rpx);
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/basic-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 640rpx;
	}

	.container {
		// min-height: calc(100vh - 130rpx);
		box-sizing: border-box;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;
		}

		.main {
			padding: 16rpx 0 0;
			// padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
			// padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
			box-sizing: border-box;

			.city-reminder {
				font-size: 26rpx;
				font-weight: 400;
				color: #FFBF12;
				line-height: 40rpx;
				box-sizing: border-box;
				padding: 28rpx 24rpx;
				background: #FFF8E5;
				border-radius: 40rpx;
			}

			.content-main {
				padding: 0 24rpx 10rpx;
			}

			scroll-view {
				white-space: nowrap;
			}

			.banner {
				margin-bottom: 32rpx;
			}

			.category-tab {
				.menu-item {
					display: inline-block;
					width: 132rpx;
					height: 128rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin: 32rpx 12rpx 24rpx 0;
					box-shadow: 2rpx 3rpx 11rpx 0rpx rgba(224, 224, 224, 0.5);
					font-size: 28rpx;
					font-weight: 900;
					color: #BBBCBB;
					line-height: 37rpx;

					&.menu-item-active {
						background: linear-gradient(144deg, #CCFA2F 0%, #ABF61A 55%, #A7F517 100%);
						color: #101010;
					}

					.menu-item-box {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						height: 100%;
					}

					.menu-image-wrapper {
						height: 60rpx;
						margin-bottom: 3rpx;

						.icon {
							height: 100%;
						}
					}

					.name {}
				}
			}

			.accompany {
				margin-top: 12rpx;
				position: relative;

				.accompany-loading {
					position: absolute;
					top: 40rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.accompany-list {
					background: #FFFFFF;
					border-radius: 40rpx;
					padding: 24rpx;
					box-sizing: border-box;
					margin-bottom: 12rpx;

					.accompany-item {
						display: flex;

						.accompany-profile {
							width: 160rpx;
							height: 160rpx;
							// background: #7D6565;
							border-radius: 50%;
							flex-shrink: 0;
							margin-right: 16rpx;
							position: relative;

							.avatarUrl {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.accompany-info {
							width: calc(100% - 184rpx - 22rpx);
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							flex: 1;

							.accompany-basic {
								width: 100%;
								justify-content: center;
								margin-bottom: 17rpx;

								.user-name {
									font-size: 30rpx;
									font-weight: 900;
									color: #282D2D;
									line-height: 44rpx;
									margin-right: 20rpx;
								}


								.location-wrapper {
									padding: 0;
									font-size: 22rpx;
									color: #BBBCBB;
									line-height: 30rpx;
									display: flex;
									align-items: center;
									flex-shrink: 0;
									justify-content: flex-end;

									&::before {
										padding-right: 6rpx;
									}
								}
							}

							.score {
								display: flex;
								align-items: center;
								margin-bottom: 19rpx;

								.value {
									font-size: 20rpx;
									font-weight: 400;
									color: #EF5668;
									line-height: 30rpx;
									margin-left: 5rpx;
								}

								.serve-num {
									font-size: 20rpx;
									font-weight: 400;
									color: #BBBCBB;
									line-height: 28rpx;
									margin-left: 16rpx;
								}
							}

							.label {
								display: flex;

								.label-item {
									box-sizing: border-box;
									padding: 4rpx 12rpx;
									background: #EFF9E6;
									border-radius: 8rpx;
									margin-right: 12rpx;
									font-size: 20rpx;
									font-weight: 400;
									line-height: 28rpx;
									color: #6D9E15;
								}

								.sl {
									// font-size: 20rpx;
									color: #BBBCBB;
								}

								.label-item-major {
									padding: 4rpx 12rpx 4rpx 115rpx;
									background: linear-gradient(130deg, #FFFBEB 0%, #FFF1C1 48%, #FFF5D3 100%);
									position: relative;
									color: #8E4400;

									&::before {
										content: "";
										display: block;
										box-sizing: border-box;
										width: 103rpx;
										height: 36rpx;
										background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/major-1.png');
										background-size: 100% 100%;
										position: absolute;
										left: 0;
										top: 0;
									}
								}
							}

							.information {
								margin-top: 24rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.price {
									font-size: 22rpx;
									font-weight: 900;
									color: #0E0E0D;
									line-height: 44rpx;
									flex: 1;
								}

								.price-num {
									margin-right: 20rpx;

									.num {
										font-size: 30rpx;
									}

								}

								.serve-num {
									font-size: 22rpx;
									font-weight: 400;
									color: #BBBCBB;
									line-height: 30rpx;
								}

								.place-order {
									flex-shrink: 0;
									width: 124rpx;
									height: 48rpx;
								}
							}
						}
					}

					.accompany-bottom {
						margin-top: 24rpx;

						.dynamic {
							display: flex;
							align-items: center;

							.content {
								font-size: 22rpx;
								font-weight: 400;
								color: #BBBCBB;
								line-height: 30rpx;
								margin-left: 8rpx;
							}
						}
					}
				}
			}
		}
	}

	.guidance {
		position: absolute;
		left: 52rpx;
		top: 600rpx;
		width: 646rpx;
		height: 239rpx;
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/overlay-k.png");
		background-repeat: no-repeat;
		background-size: 100%;
		z-index: 10002;
	}
</style>